<template>
    <div id='OverdueStatistics'>
        <!--逾期统计 -->
        <div class="header">
             <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="全部" name="first">
              <loading v-if="allLoading"></loading>
              <div class="main" v-else="!allLoading">
                <!-- 数据渲染tab  start-->
                  <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="needRepayTime"
                    align="center"
                    :formatter="formatter"
                    label="应还日期">
                  </el-table-column>
                  <el-table-column
                    prop="needRepayCount"
                    align="center"
                    label="应还订单数">
                  </el-table-column>
                  <el-table-column
                    prop="needRepayAmount"
                    align="center"
                    label="应还总额">
                  </el-table-column>
                  <el-table-column
                    prop="principalAmount"
                    align="center"
                    label="本金总额">
                  </el-table-column>
                  <el-table-column
                    prop="repaySince"
                    align="center"
                    label="本金回款占比">
                  </el-table-column>
                  <el-table-column
                    prop="repayAmount"
                    align="center"
                    label="总回款">
                  </el-table-column>
                  <el-table-column
                    prop="repayCount"
                    align="center"
                    label="总回款笔数">
                  </el-table-column>
                  <el-table-column
                    prop="d0"
                    align="center"
                    label="d0">
                  </el-table-column>
                  <el-table-column
                    prop="d1"
                    align="center"
                    label="d1">
                  </el-table-column>
                  <el-table-column
                    prop="d2"
                    align="center"
                    label="d2">
                  </el-table-column>
                  <el-table-column
                    prop="d3"
                    align="center"
                    label="d3">
                  </el-table-column>
                  <el-table-column
                    prop="d4"
                    align="center"
                    label="d4">
                  </el-table-column>
                  <el-table-column
                    prop="d5"
                    align="center"
                    label="d5">
                  </el-table-column>
                  <el-table-column
                    prop="d6"
                    align="center"
                    label="d6">
                  </el-table-column>
                  <el-table-column
                    prop="d7"
                    align="center"
                    label="d7">
                  </el-table-column>
                  <el-table-column
                    prop="dnow"
                    align="center"
                    label="当前逾期率">
                  </el-table-column>

                </el-table>
                <!-- 数据渲染tab  end -->
                  <el-pagination
                  class="pagat"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage1"
                  background
                  :page-count="5"
                  :page-size="10"
                  layout="total, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
              </el-tab-pane>
              <el-tab-pane label="老客户" name="second">
                <!-- 数据渲染tab  start-->
                <loading v-show="oldLoading"></loading> 
                <div class="oldMain" v-show="!oldLoading">
                    <el-table
                  :data="tableData1"
                  style="width: 100%">
                    
                      <el-table-column
                      prop="needRepayTime"
                      align="center"
                      :formatter="formatter"
                      label="应还日期">
                    </el-table-column>
                    <el-table-column
                      prop="needRepayCount"
                      align="center"
                      label="应还订单数">
                    </el-table-column>
                    <el-table-column
                      prop="needRepayAmount"
                      align="center"
                      label="应还总额">
                    </el-table-column>
                    <el-table-column
                      prop="principalAmount"
                      align="center"
                      label="本金总额">
                    </el-table-column>
                    <el-table-column
                      prop="repaySince"
                      align="center"
                      label="本金回款占比">
                    </el-table-column>
                    <el-table-column
                      prop="repayAmount"
                      align="center"
                      label="总回款">
                    </el-table-column>
                    <el-table-column
                      prop="repayCount"
                      align="center"
                      label="总回款笔数">
                    </el-table-column>
                    <el-table-column
                      prop="d0"
                      align="center"
                      label="d0">
                    </el-table-column>
                    <el-table-column
                      prop="d1"
                      align="center"
                      label="d1">
                    </el-table-column>
                    <el-table-column
                      prop="d2"
                      align="center"
                      label="d2">
                    </el-table-column>
                    <el-table-column
                      prop="d3"
                      align="center"
                      label="d3">
                    </el-table-column>
                    <el-table-column
                      prop="d4"
                      align="center"
                      label="d4">
                    </el-table-column>
                    <el-table-column
                      prop="d5"
                      align="center"
                      label="d5">
                    </el-table-column>
                    <el-table-column
                      prop="d6"
                      align="center"
                      label="d6">
                    </el-table-column>
                    <el-table-column
                      prop="d7"
                      align="center"
                      label="d7">
                    </el-table-column>
                    <el-table-column
                      prop="dnow"
                      align="center"
                      label="当前逾期率">
                    </el-table-column>
                  </el-table>
                    <el-pagination
                      class="pagat"
                      @current-change="handleCurrentChange1"
                      :current-page="currentPage2"
                      background
                      :page-count="5"
                      :page-size="10"
                      layout="total, prev, pager, next, jumper"
                      :total="total1">
                    </el-pagination>
                </div> 
                  
               
                <!-- 数据渲染tab  end -->
              </el-tab-pane>
                <el-tab-pane label="新客户" name="third">
                    <!-- 数据渲染tab  start-->
                  <loading v-show="newLoading"></loading> 
                  <div class="newMain" v-show="!newLoading">
                       <el-table
                  :data="tableData2"
                  style="width: 100%">
                      <el-table-column
                      prop="needRepayTime"
                      align="center"
                      :formatter="formatter"
                      label="应还日期">
                    </el-table-column>
                    <el-table-column
                      prop="needRepayCount"
                      align="center"
                      label="应还订单数">
                    </el-table-column>
                    <el-table-column
                      prop="needRepayAmount"
                      align="center"
                      label="应还总额">
                    </el-table-column>
                    <el-table-column
                      prop="principalAmount"
                      align="center"
                      label="本金总额">
                    </el-table-column>
                    <el-table-column
                      prop="repaySince"
                      align="center"
                      label="本金回款占比">
                    </el-table-column>
                    <el-table-column
                      prop="repayAmount"
                      align="center"
                      label="总回款">
                    </el-table-column>
                    <el-table-column
                      prop="repayCount"
                      align="center"
                      label="总回款笔数">
                    </el-table-column>
                    <el-table-column
                      prop="d0"
                      align="center"
                      label="d0">
                    </el-table-column>
                    <el-table-column
                      prop="d1"
                      align="center"
                      label="d1">
                    </el-table-column>
                    <el-table-column
                      prop="d2"
                      align="center"
                      label="d2">
                    </el-table-column>
                    <el-table-column
                      prop="d3"
                      align="center"
                      label="d3">
                    </el-table-column>
                    <el-table-column
                      prop="d4"
                      align="center"
                      label="d4">
                    </el-table-column>
                    <el-table-column
                      prop="d5"
                      align="center"
                      label="d5">
                    </el-table-column>
                    <el-table-column
                      prop="d6"
                      align="center"
                      label="d6">
                    </el-table-column>
                    <el-table-column
                      prop="d7"
                      align="center"
                      label="d7">
                    </el-table-column>
                    <el-table-column
                      prop="dnow"
                      align="center"
                      label="当前逾期率">
                    </el-table-column>
                    </el-table>
                    <el-pagination
                      class="pagat"
                      @current-change="handleCurrentChange2"
                      :current-page="currentPage3"
                      background
                      :page-count="5"
                      :page-size="10"
                      layout="total, prev, pager, next, jumper"
                      :total="total2">
                    </el-pagination>
                  </div>
                 
              </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import  { mapGetters, mapActions }  from 'vuex'
import Storage from '../utils/storage'
import loading from '../components/Loading.vue'
import { channelApi }from '../api/api'
import moment from 'moment'
export default{
    components:{
        loading,
    },
    data(){
        return{
            activeName:"first",
            currentPage1:1,
            currentPage2:1,
            currentPage3:1,
            tableData:[],
            tableData1:[],
            tableData2:[],
            allIndex:1,
            total:1,
            newIndex:1,
            total1:1,
            oldIndex:1,
            total2:1,
            allLoading:false,
            oldLoading:false,
            newLoading:false,
        }
    },
    methods:{
      ...mapActions([
                'setSessionId'
            ]),

        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.allIndex=val;
            this.allInit();
        },
        handleCurrentChange1(val){
            this.oldIndex=val;
            this.oldInit();
        },
        handleCurrentChange2(val){
            
            this.newIndex=val;
            this.newInit();
        },
        dateFormat1:function(row, column) { 
          var date = row[column.property]; 
           if (date == undefined) { 
             return "--"; 
           } 
           return moment(date).format("YYYY-MM-DD"); 
        }, 
        handleClick(tab, event){
          console.log(tab.name);
          if(tab.name=="second"){
            this.oldInit();
          }else if(tab.name=="third"){
            this.newInit();
          }
        },
        formatter(row, column, cellValue, index){
            return moment(cellValue).format("YYYY.MM.DD")
        },
        //初始化数据
        allInit(){
            let msg={
              pageIndex:this.allIndex,
              pageSize:10,
            }
            this.allLoading=true
            channelApi.channelGetAllUserOverReportList(msg)
            .then(result =>{
                console.log(result)
                this.allLoading=false
                this.currentPage1=result.page.pageNumber
                this.total=result.page.totalRow
                this.tableData=result.page.list
            })
            .catch(error => {
                console.error(error)
                this.allLoading=false
            })
        },
        oldInit(){
          let msg={
              pageIndex:this.oldIndex,
              pageSize:10,
            }
            this.oldLoading=true
            channelApi.channelGetOldUserOverReportList(msg)
            .then(result =>{
                console.log(result)
                this.total1=result.page.totalRow
                this.currentPage2=result.page.pageNumber
                this.oldLoading=false
                this.tableData1=result.page.list
            })
            .catch(error => {
                console.error(error)
                this.oldLoading=false
            })
        },
        newInit(){
            let msg={
              pageIndex:this.newIndex,
              pageSize:10,
            }
            this.newLoading=true
            channelApi.channelGetNewUserOverReportList(msg)
            .then(result =>{
                console.log(result)
                this.newLoading=false
                this.total2=result.page.totalRow
                this.currentPage3=result.page.pageNumber
                this.tableData2=result.page.list
            })
            .catch(error => {
                console.error(error)
                this.newLoading=false
            })
        },
        
    },
    mounted(){
      this.session=Storage.get('51SjdAdmin_sessionId')
      
    },
    created(){
        this.allInit()
        //console.log(moment().format("YYYY.MM.DD"))
    },
}
</script>
<style>
  #OverdueStatistics .el-table{
        font-size: 14px;
    }
</style>
<style lang="scss" scoped>

@import "../sass/variables";

  #OverdueStatistics{
    padding-left: 30px;
    padding-top:30px;
  }
  .header{
    
  }
  .pagat{
    margin-top: 20px;
  }
</style>